<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }

    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item label="预案名称">
                    <el-input placeholder="预案名称" style="width: 150px;" v-model="PreName"></el-input>
                </el-form-item>
                <el-form-item label="考核周期">
                    <el-date-picker
                            v-model="date"
                            type="datetimerange"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="btnSearch">查询</el-button>
                    <el-button type="success" @click="btnAdd">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="PreName"
                        label="预案名称"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="考核周期"
                >
                    <template slot-scope="scope">
                        {{scope.row.startTime.replace("T"," ")}}至{{scope.row.endTime.replace("T"," ")}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="DepartmentName"
                        label="考核部门">
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="address"-->
                <!--label="考核统计">-->
                <!--</el-table-column>-->
                <el-table-column
                        prop="address"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button round icon="el-icon-setting" size="mini"
                                   @click="handleEdit(scope.row.ExaId)" type="info">编辑
                        </el-button>
                        <el-button @click="deleteClick(scope.row)" round size="mini" icon="el-icon-delete"
                                   type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                               :current-page.sync="pageno" @current-change="onChangePage">
                </el-pagination>
            </div>
        </div>
    </div>
    <el-dialog :title="editMod?'编辑':'新增'" :visible.sync="addVisible" :show-close="false" width="70%"
               style="display: none">
        <el-form :model="addForm">
            <el-form-item label="预案名称">
                <el-select v-model="addForm.PreId" style="width: 60%">
                    <el-option
                            v-for="item in plan_list"
                            :key="item.PreId"
                            :label="item.PreName"
                            :value="item.PreId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考核周期">
                <el-date-picker
                        v-model="addForm.date"
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 60%">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="考核部门">
                <el-select v-model="addForm.DepartmentId" style="width: 60%">
                    <el-option
                            v-for="item in DepartmentData"
                            :key="item.DepartmentID"
                            :label="item.DepartmentName"
                            :value="item.DepartmentID">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考核规则">
                <el-col :span="7">
                    <span>*每题分数（分）</span>
                    <el-input placeholder="每题分数（分）" style="width: 150px" type="number"
                              v-model="addForm.eachSubject"></el-input>
                </el-col>
                <el-col :span="7">
                    <span>*合格分数（分）</span>
                    <el-input placeholder="合格分数（分）" style="width: 150px" type="number"
                              v-model="addForm.upMark"></el-input>
                </el-col>
                <el-col :span="7">
                    <span>*答题时间(分)</span>
                    <el-input placeholder="答题时间（分）" style="width: 150px" type="number"
                              v-model="addForm.answerMinute"></el-input>
                </el-col>
            </el-form-item>

            <el-divider content-position="right">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="addJudgeContent">添加一行</el-button>
            </el-divider>
            <table width="100%" cellspacing="0" cellpadding="0" class="table" style="text-align: center">
                <tr>
                    <th style="width:10%">序号</th>
                    <th style="width:50%;color: red">判断题试题内容</th>
                    <th style="width: 30%">正确答案</th>
                    <th style="width:10% ">操作</th>
                </tr>
                <tr v-for="(item,i) in judgeContent">
                    <td>
                        {{i+1}}
                    </td>
                    <td>
                        <el-input v-model="item.content" type="textarea" maxlength="50"/>
                    </td>
                    <td>
                        <el-radio v-model="item.answer" label="1" border>正确</el-radio>
                        <el-radio v-model="item.answer" label="0" border>错误</el-radio>
                    </td>
                    <td>
                        <el-button @click="delJudgeContent(i)" type="warning" size="mini">删除</el-button>
                    </td>

                </tr>
            </table>


            <el-divider content-position="right">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="addSelContent">添加一行</el-button>
            </el-divider>
            <table width="100%" cellspacing="0" cellpadding="0" class="table" style="text-align: center">
                <tr>
                    <th style="width:5%">序号</th>
                    <th style="width:30%;color: red">选择题试题内容</th>
                    <th style="width: 12%">选项A</th>
                    <th style="width: 12%">选项B</th>
                    <th style="width: 12%">选项C</th>
                    <th style="width: 12%">选项D</th>
                    <th style="width:12% ">正确答案</th>
                    <th style="width:5% ">操作</th>
                </tr>
                <tr v-for="(item,i) in selContent">
                    <td>
                        {{i+1}}
                    </td>
                    <td>
                        <el-input v-model="item.content" type="textarea" maxlength="50"/>
                    </td>
                    <td>
                        <el-input v-model="item.A_content" type="textarea" maxlength="30"/>
                    </td>
                    <td>
                        <el-input v-model="item.B_content" type="textarea" maxlength="30"/>
                    </td>
                    <td>
                        <el-input v-model="item.C_content" type="textarea" maxlength="30"/>
                    </td>
                    <td>
                        <el-input v-model="item.D_content" type="textarea" maxlength="30"/>
                    </td>
                    <td>
                        <el-select v-model="item.answer" placeholder="请选择">
                            <el-option
                                    v-for="item in sel_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-button @click="delSelContent(i)" type="warning" size="mini">删除</el-button>
                    </td>

                </tr>
            </table>
        </el-form>

        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="addCancel()">取消</el-button>
                    <el-button type="primary" @click="addSubmit()"
                               style="text-align: center">确定</el-button>
            </span>
    </el-dialog>

</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            editMod: false,
            searchForm: {},
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 10,
            addVisible: false,
            plan_list: [],
            addForm: {},
            DepartmentData: [],
            judgeContent: [],
            selContent: [],
            sel_options: [{label: '选项A', value: 'A'}, {label: '选项B', value: 'B'}, {
                label: '选项C',
                value: 'C'
            }, {label: '选项D', value: 'D'}],
            PreplanList: [],
            PreName: '',
            date: ''
        },
        methods: {
            getPreplan() {
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = 1;
                param.pagesize = 1000;
                HttpUtil.get('ContingencyPreplan/PreplanList', param).success((res) => {
                    this.plan_list = res.data;
                })
            },
            handleEdit(ExaId,) {
                HttpUtil.get('EmergenceSupplies/ExaminationList', {
                    ExaId: ExaId,
                    projectNo: SiteConfig.account.projectNo
                }).success((r) => {
                    if (r.state == 0) {
                        this.addForm = {
                            DepartmentId: r.data[0].Exadata[0].DepartmentId,
                            DepartmentName: r.data[0].Exadata[0].DepartmentName,
                            ExaId: r.data[0].Exadata[0].ExaId,
                            PreId: r.data[0].Exadata[0].PreId.toString(),
                            PreName: r.data[0].Exadata[0].PreName,
                            answerMinute: r.data[0].Exadata[0].answerMinute,
                            createTime: r.data[0].Exadata[0].createTime,
                            eachSubject: r.data[0].Exadata[0].eachSubject,
                            endTime: r.data[0].Exadata[0].endTime,
                            id: r.data[0].Exadata[0].id,
                            projectNo: r.data[0].Exadata[0].projectNo,
                            startTime: r.data[0].Exadata[0].startTime,
                            upMark: r.data[0].Exadata[0].upMark
                        };
                        var p = [];
                        p.push(r.data[0].Exadata[0].startTime.replace("T", " "));
                        p.push(r.data[0].Exadata[0].endTime.replace("T", " "));
                        this.addForm.date = p;
                        this.selContent = r.data[1].choiceDatas;
                        this.judgeContent = r.data[2].recognizedDatas;
                        this.addVisible = true;
                        this.editMod = true;
                    }
                    else {
                        this.$message({
                            type: 'error',
                            message: r.errMsg
                        })
                    }

                })
            },
            CompareDate: function (d1, d2) {
                return ((new Date(d1.replace(/-/g, "\/"))) > (new Date(d2.replace(/-/g, "\/"))));
            },
            parseTime(d) {
                const newDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' '
                    + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                return newDate;
            },
            addSubmit() {
                let param = {};
                if (!this.addForm.PreId) {
                    this.$message.error('预案不能为空!');
                    return;
                }
                if (!this.addForm.date) {
                    this.$message.error('考核周期不能为空!');
                    return;
                }
                //2把字符串格式转换为日期类
                // var startTime = new Date(Date.parse());
                // var endTime = new Date(Date.parse(this.addForm.date[1]));

                if (this.CompareDate(this.addForm.date[0], this.addForm.date[1])) {
                    this.$message.error('考核周期结束时间不能大于开始时间!');
                    return;
                }
                this.addForm.startTime = this.addForm.date[0];
                this.addForm.endTime = this.addForm.date[1];


                if (!this.addForm.DepartmentId) {
                    this.$message.error('考核部门不能为空!');
                    return;
                }
                if (!this.addForm.eachSubject) {
                    this.$message.error('每题分数不能为空!');
                    return;
                }
                if (!this.addForm.upMark) {
                    this.$message.error('合格分数不能为空!');
                    return;
                }
                if (!this.addForm.answerMinute) {
                    this.$message.error('答题时间不能为空!');
                    return;
                }

                if (this.judgeContent.length == 0) {
                    this.$message.error('最少添加一条判断题!');
                    return;
                }
                if (!this.judgeContent[0].content) {
                    this.$message.error('判断题试题内容不能为空!');
                    return;
                }

                if (this.selContent.length == 0) {
                    this.$message.error('最少添加一条选择题!');
                    return;
                }

                if (!this.selContent[0].content) {
                    this.$message.error('选择题试题内容不能为空!');
                    return;
                }
                this.addForm.choiceData = JSON.stringify(this.selContent);//选择
                this.addForm.recognizedData = JSON.stringify(this.judgeContent);//判断
                if (this.editMod) {
                    this.addForm.Id = this.addForm.Id;
                    HttpUtil.get('EmergenceSupplies/ExaminationUpdate', this.addForm).success((r) => {
                        this.addCancel();
                        this.getExamination();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    })
                } else {
                    this.addForm.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('EmergenceSupplies/ExaminationAdd', this.addForm).success((r) => {
                        this.addCancel();
                        this.getExamination();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                }
            },
            deleteClick(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('EmergenceSupplies/ExaminationDelete', {ExaId: row.ExaId}).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getExamination();
                        }
                        else {
                            this.$message({
                                type: 'info',
                                message: res.errMsg
                            });
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getExamination() {
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                if (this.PreName)
                    param.PreName = this.PreName;
                if (this.date) {
                    if (this.CompareDate(this.date[0], this.date[1])) {
                        this.$message.error('考核周期结束时间不能大于开始时间!');
                        return;
                    }
                    param.startTime = this.date[0];
                    param.endTime = this.date[1];
                }
                param.pageno = 1;
                param.pagesize = 1000;
                HttpUtil.get('EmergenceSupplies/ExaminationList', param).success((res) => {
                    this.tableData = res.data;
                })
            },
            btnSearch() {
                this.getExamination();
            },
            addCancel() {
                this.addVisible = false;
                this.addForm = {};
            },
            btnAdd() {
                this.addVisible = true;
                this.editMod = false;
                this.judgeContent = [{content: '', answer: '1'}];
                this.selContent = [{
                    content: '',
                    A_content: '',
                    B_content: '',
                    C_content: '',
                    D_content: '',
                    answer: ''
                }]
            },
            delJudgeContent(index) {
                this.judgeContent.splice(index, 1);
            },
            addJudgeContent() {
                this.judgeContent.push({content: '', answer: '1'});
            },
            delSelContent(index) {
                this.selContent.splice(index, 1);
            },
            addSelContent() {
                this.selContent.push({
                    content: '',
                    A_content: '',
                    B_content: '',
                    C_content: '',
                    D_content: '',
                    answer: ''
                })
            },
            onChangePage(page) {

            }
        },
        created: function () {

            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            let id = HttpUtil.getQueryString('id');
            if (proNo) SiteConfig.account.id = id;
            this.getPreplan()
            this.getExamination()
            HttpUtil.get('Department/List', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                if (r.state == 0) {
                    this.DepartmentData = r.data;
                }
            })
        },
        mounted: function () {

        }
    });


</script>

</body>
</html>
